<template>
  <div class="box">
    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="Name" prop="name" />
      <el-table-column label="Phone" prop="phone" />
      <el-table-column label="Money" prop="money" />
      <el-table-column label="VIP" prop="vip" />
       <el-switch prop="userState" ></el-switch>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="mini" placeholder="Type to search" />
        </template>
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handleDelete(scope.$index, scope.row)"
            >消费记录</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size=size
      background
      layout="prev, pager, next"
      :total="100"
    >
    </el-pagination>
  </div>
</template>

<script>
import { useRouter,useRoute } from "vue-router";
import router from "../router";
import { user } from "../api";
export default {
  data() {
    return {
        page:'0',
        size:'6',
      tableData: [
        {
          userName: "",
          password: "",
          phone: "",
          userState: true,
          money: "",
          vip: "",
          name: "",
        },
      ],
      search: "",
    };
  },
  methods: {
    handleEdit(index, row) {
      router.push({name:'editor',params:{id:row.id}})
    },
    handleDelete(index, row) {
     router.push({name:'record',params:{id:row.id}})
    },
    handleCurrentChange(val) {
        //将分页所选的页数传递给后端 重新给表格赋值
        console.log(val)
      user(val,this.size).then((res) => {
     this.tableData=res.data.data;
    });
    },
  },
  created: function () {
      //页面初次加载 获取表格数据
    user(this.page,this.size).then((res) => {
     this.tableData=res.data.data;
    });
  },
};
</script>

<style scoped>
.box {
  width: 1000px;
  display: flex;
  justify-content: space-between;
}
.page {
  width: 700px;
  margin: 40px auto 0;
}
</style>